<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存取器优化代码逻辑</title>
</head>
<body>
    <div class="move"></div>
    <style>
        .move{
            width: 50px;
            height: 50px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
    <script>
        var div=document.querySelector(".move");
        var config={
            _x:0,
            _y:0,
            xDis:2,//每次移动x的距离
            yDis:2,//每次移动y的距离
            duration:16,//移动的间隔时间
            width:100,height:100
        };
        Object.defineProperty(config,"x",{
            get:function(){
                return this._x;
            },
            set:function(val){
                if(val<0){
                    val = 0;
                }else if(val>document.documentElement.clientWidth - config.width){
                    val=document.documentElement.clientWidth - config.width;
                }
                this._x = val;
                div.style.left = val + 'px';
            }
        })

        Object.defineProperty(config,"y",{
            get:function(){
                return this._x;
            },
            set:function(val){
                if(val<0){
                    val = 0;
                }else if(val>document.documentElement.clientHeight - config.height){
                    val=document.documentElement.clientHeight - config.height;
                }
                this._y = val;
                div.style.top = val + 'px';
            }
        })
        // var x=0,//初始化坐标x
        // y=0,//初始化坐标y
        // xDis=2,//每次移动x的距离
        // yDis=2,//每次移动y的距离
        // duration=16,//移动的间隔时间
        // width=100,height=100;

        setInterval(function (){
            config.x +=config.xDis;
            config.y +=config.yDis;
            // 边界判定
            if(config.y === document.documentElement.clientHeight-config.height
        || config.y===0){
                config.yDis = - config.yDis;
            }
            if(config.x ===document.documentElement.clientWidth-config.width
        || config.x===0){
                config.xDis = -config.xDis;
            }
        },config.duration);

    </script>
</body>
</html>